<template>
	<view class="detail">
		<view class="title-img">
			<image :src="data.imgurl" mode="scaleToFill"></image>
		</view>

		<view class="introduction">
			<view 
        v-for="it in data.msg" :key="it.key"
        style="display: flex; justify-content: space-around;"
      >
				<text class="introduction-text">{{ it.key }}:{{ it.value }}</text>
			</view>
		</view>

		<view class="detail-content">
			<view class="detail-title"> 详情 </view>
			<view class="detail-content-box">
				<text selectable="true" class="detail-text">
					{{ data.content }}
				</text>
				<view v-if="data?.bigimg!=''">
					<image class="detail-img" :src="data.bigimg" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref, Ref } from "vue";

  interface Data{
    imgurl: string
    content: string
		bigimg: string
    msg: { key:string, value:string }[]
  }
  const data:Ref<Data> = ref({
    imgurl:"../../static/logo.png",
    content: "Content",
		bigimg: "",
    msg:[{
      key: 'key',
      value: 'value'
    }]});
  onLoad((val: any) => {
    data.value = JSON.parse(decodeURIComponent(val.info));
    console.log(data.value);
  })
</script>

<style lang="scss" scoped>
	.detail {
		position: relative;
		height: 100vh;
		background-color: #fafafa;

		.title-img {
			width: 100%;
			height: 300rpx;
			text-align: center;
			background-color: #ffffff;
			//border-top: 1rpx solid black;
			//border-bottom: 1rpx solid black;

			image {
				height: 300rpx;
				width: 100%;
				margin: 0 auto;
			}
		}

		.introduction {
			height: 100rpx;
			width: 100%;
			background-color: #ffffff;
			margin: 30rpx 0;
			//border-top: 1rpx solid black;
			//border-bottom: 1rpx solid black;

			.introduction-text {
				box-sizing: border-box;
				display: inline-block;
				height: 50rpx;
				width: 400rpx;
				line-height: 50rpx;
				padding-left: 40rpx;
				font-size: 25rpx;
			}
		}

		.detail-content {
			position: relative;
			width: 100%;
			//border: 1rpx solid black;

			.detail-title {
				box-sizing: border-box;
				height: 50rpx;
				width: 100%;
				line-height: 50rpx;
				background-color: #ffffff;
				font-size: 25rpx;
				white-space: pre-line;
				padding-left: 40rpx;

				//border-bottom: 1rpx solid black;

				&::before {
					content: "|";
					margin-right: 10rpx;
					font-size: 25rpx;
				}
			}

			.detail-content-box {
				box-sizing: border-box;
				padding: 0 40rpx 80rpx;
				width: 100%;

				.detail-text {
					text-overflow:ellipsis;
					word-wrap: break-word;
					word-break: break-all;

					height: auto;

					width: 100%;
					padding: 20rpx 0;
					font-size: 25rpx;

				}

				.detail-img {
					width: 100%;

					margin: 20rpx 0;
				}
			}

		}

		.submit {
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			width: 100%;
			background-color: #408bc7;
			color: #ffffff;
			font-size: 25rpx;
		}
	}
</style>
